<include file='../Public/header' />
<link href="../Public/css/diy_adaptable.css" rel="stylesheet" type="text/css" />
<link href="../Public/css/index.css" rel="stylesheet" type="text/css" />
<link href="../Public/css/pop_up.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"
	href="__PUBLIC__/js/jquery-ui-1.8.24.custom/development-bundle/demos/demos.css">
<style>
.draggable {
	width: 90px;
	height: 80px;
	padding: 5px;
	float: left;
	margin: 0 10px 10px 0;
	font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
	margin: 0;
}
#snaptarget {
	height: 140px;
}
.main {
	background: url(__PUBLIC__/Images/bg06.png);
	width: 980px;
	height: 500px;
	margin: 0 auto;
}
.ui-resizable-helper {
	border: 1px dotted gray;
}
.dir_box {
	width: 80px;
	height: 30px;
	border: #00F thin solid;
	float: left;
	margin: 5px;
}
</style>
<script>
$(function() {
	$(".dir_box").draggable({
		snap : true,
		grid : [ 5, 5 ],
		snapTolerance : 5,
		helper: "clone",
		revert: "invalid",
		animate:true
	});

	$(".main").droppable({
		accept : ".dir_box",
		activeClass : "ui-state-hover",
		hoverClass : "ui-state-active",
		drop : function(event, ui) {
			dropAffter(ui);
		}
	});
});

function dropAffter(ui) {
	var diyType = ui.helper.attr('rel');
	//console.log(ui.helper.html());
//	console.log(ui.position.top);
//	console.log(ui.position.left);
//	console.log(ui.offset.top);
//	console.log(ui.offset.left);	
	var param = 'diyType/'+diyType+'/offset/'+ui.offset.left+'|'+ui.offset.top;
	$.tbox.popup("__ROOT__/diy/setting/"+param, "配置参数", {ok:'savemodel'});
}

function bak(obj) {
	var classValue = obj.attr('class');
	var sear = classValue.search('ui-draggable');
	//console.log(sear);
	var type = obj.attr('rel');
	//console.log(type);
	if (sear === -1 || true) {
		obj.html("44444444444444");
		obj.animate({
			width : 200,
			height : 200
		});
		obj.resizable({
			grid : [ 5, 5 ],
			animate : true
		});
	}
}
</script>
</head>
<body>
<div class="dir_header">
  <div class="dir_box" rel='image'>图片模块</div>
  <div class="dir_box" rel='text'>文字模块</div>
</div>
<div style="clear: both;"></div>
<div class="main" id="diy_layout">

</div>
<include file='../Public/footer' />
